<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="decorator" uri="http://claudiushauptmann.com/jsp-decorator/"%>
<%@ page import="vn.fpt.fsoft.entity.User" %>
<decorator:decorate filename="MasterPage.jsp">
	<decorator:content placeholder="title">List User</decorator:content>
	<decorator:content placeholder="head">
		<link rel="stylesheet" href="css/jq.css" type="text/css"
			media="print, projection, screen" />
		<link rel="stylesheet" href="css/style-tablesort.css" type="text/css"
			media="print, projection, screen" />
		<script
			src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
		<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
		<script type="text/javascript" src="js/docs.js"></script>

		<script type="text/javascript"
			src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="http://bootboxjs.com/bootbox.js"></script>
		<link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
			rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="css/style-homepage.css" type="text/css">
		<link rel="stylesheet"
			href="http://www.script-tutorials.com/demos/87/css/style.css"
			type="text/css" media="screen">

		<script type="text/javascript">
			function logout() {
				$.ajax({
					url : "UserController?action=logout",
					type : "POST",
					success : function(data) {
						return true;
					},
					error : function(data) {
						return true;
					}
				});
			}

			function Click_Record(userID, isActive) {
				if (!isActive) {
					bootbox.confirm("Do you want to make this User active?",
						function(result) {
							if (result == true) {
							$.ajax({
								url : "UserController?action=active&checked=1&userID="
										+ userID,
								type : "POST",
								success : function(data) {
									alert("Active Susscess! ");
										load(data);
									},
								error : function(data) {
									alert("Fail");
								}
							})
							} else {

							}
						});
				} else {
					bootbox.dialog({
						message : "What do you want update this user?",
						buttons : {
							upadate : {
								label : "Update",
								className : "btn-upadte",
								callback : function() {
									window.location = "AmendUser.jsp?userID=" + userID;
								}
							},
							cancel : {
								label : "Cancel",
								className : "btn-cancel",
							}
						}
					});
				}
			}

			function load(result) {
				$("#datatable").empty();
				$("#datatable").append(result);
				$("#table").tablesorter({
					widthFixed : true,
					widgets : [ 'zebra' ]
				}).tablesorterPager({
					container : $("#pager"),
				});
				$("#pager").css("position", "static");
			}

			$(document).ready(function() {
				$("a").click(function() {
					var idclick = $(this).attr("id");
					if(idclick == "all" || idclick == "digital" || idclick == "ae" ||
							idclick == "fj" || idclick == "kn" || idclick == "or" ||
							idclick == "sv" ||idclick == "wz") {
						var check = $("#checkActive").prop("checked");
						check = (check == true) ? 1 : 0;
						$.ajax({
							url : "UserController?action=listUser&idclick=" 
										+ idclick + "&checked=" + check,
							type : "POST",
							success : function(result) {
									load(result);
							},
							error : function(result) {
									alert("fail");
							}
						});
					}
				})
				$("#checkActive").click(function() {
					var check = $("#checkActive").attr("checked");
					if (check) {
						$.ajax({
							url : "UserController?action=listUser&checked=1",
							type : "POST",
							success : function(result) {
								load(result);
							},
							error : function(result) {
								alert("fail");
							}
						});
					} else {
						$.ajax({
							url : "UserController?action=listUser&checked=0",
							type : "POST",
							success : function(result) {
								load(result);
							},
							error : function(result) {
								alert("fail");
							}
						});
					}
				});

			});
			$(window).load(function() {
				$.ajax({
					url : "UserController?action=listUser&checked=0",
					type : "POST",
					success : function(result) {
						load(result);
					},
					error : function(result) {
						alert("fail");
					}
				});
			})
			function create() {
				window.location = "AddUser.jsp";
			}
		</script>

	</decorator:content>
	<decorator:content placeholder="body">
	<%
		User user = (User) request.getSession().getAttribute("user");
		if(user == null) {
		    response.sendRedirect("login.jsp");
		}
	%>
		<div style="width: 795px;">
		<p style="color: #0C3; font-size: 24px; font-weight: bold;">List User</p>
			<div id="manager_nav">
				<ul>
					<li><a href="#" id="all">All</a></li>
					<li>|</li>
					<li><a href="#" id="digital">0 - 9</a></li>
					<li>|</li>
					<li><a href="#" id="ae">A B C D E</a></li>
					<li>|</li>
					<li><a href="#" id="fj">F G H I J</a></li>
					<li>|</li>
					<li><a href="#" id="kn">K L M N</a></li>
					<li>|</li>
					<li><a href="#" id="or">O P Q R</a></li>
					<li>|</li>
					<li><a href="#" id="sv">S T U V</a></li>
					<li>|</li>
					<li><a href="#" id="wz">W X Y Z</a></li>
				</ul>
			</div>
			<div id="manager_action">
				<input type="button" value="Create" onclick="create();" /> 
				<input type="checkbox" id="checkActive">
					<span style ="color: gray; font-weight:bold">Include in-active</span>
			</div>
			<br>
			<div id="datatable"></div>
		</div>
	</decorator:content>
</decorator:decorate>